<template>
  <div class="body build-body" id="main">

    <div class="build-banner build-banner2">
      <div id="w0" class="anchor" style="-webkit-transform:translateY(-122px);transform: translateY(-122px)"></div>
      <div class="center-block">
        <div class="Crumbs">
          您的位置：
          <router-link to="/home">首页<b>&gt;</b></router-link>
          <router-link to="/dataService">数据服务<b>&gt;</b></router-link>
          <a href="javascript:;">建设项目</a>
        </div>

        <h2 class="build-title">发展改革委民旺园23号楼等9个老旧小区综合整治项目</h2>

        <div class="hyaline">
          <p class="hyaline-tag">
            <span class="spaTaB">在建</span>
          </p>
          <div class="hyaline-box clearfix">
            <p><span>工程编码</span>1101021605200101</p>
            <p><span>所属项目</span>
              <router-link class="blue" to="/dataService/project/conDetail" style="text-decoration: underline">
                发展改革委民旺园23号楼等9个老旧小区综合整治项目
              </router-link>
            </p>

          </div>
        </div>

      </div>
    </div>

    <navigation id="nav" :navData="projectData"></navigation>

    <section class="center-block">
      <div class="anchor" id="w1"></div>
      <h2 class=item-title>项目建档</h2>
      <div class="item-body">
        <section>
          <h3 class="item-title-small">基本信息</h3>
          <ul class="demoTable demoTableTl clearfix">
            <li><label>项目编号</label><span>1101021605200101</span></li>
            <li><label>建档时间</label><span>2019年05月19日</span></li>
            <li><label>所在区划</label><span>安徽省-合肥市-高新区</span></li>
            <li><label>建设地址</label><span>合肥市高新区创新大道与习友路交口东南角</span></li>
            <li><label>建设单位</label><span>国家发展和改革委员会基建物业管理中心</span></li>
            <li><label>项目负责人</label><span>徐正阳</span></li>
            <li><label>项目用途</label><span>住宅</span></li>
            <li><label>资金性质</label><span>国有资金</span></li>
            <li><label>项目分类</label><span>市政工程</span></li>
            <li><label>机构代码</label><span>40000068-3</span></li>
            <li><label>建设性质</label><span>新建</span></li>
            <li><label>建设模式</label><span>自建</span></li>
            <li><label>项目规模</label><span>大型</span></li>
            <li><label>建筑面积</label><span>580000 平方米</span></li>
          </ul>
        </section>
        <section>
          <h3 class="item-title-small">单位工程</h3>
          <ul class="demoTable demoTableTl clearfix">
            <li><label>标段编号</label><span>1101021605200101</span></li>
            <li><label>建设单位</label><span>国家发展和改革委员会基建物业管理中心</span></li>
            <li><label>建设项目</label><span>2019年05月19日</span></li>
            <li><label>发包方式</label><span>安徽省-合肥市-高新区</span></li>
            <li><label>发包单位</label><span>直接委托</span></li>
            <li><label>最终合同价</label><span>4000 万元</span></li>
            <li><label style="width: 118px;">计划开工日期</label><span style="width: 200px;">2019年05月19日</span></li>
            <li><label>计划竣工日期</label><span>2019年05月19日</span></li>
          </ul>

        </section>
        <section class="relative">
          <h3 class="item-title-small">参建人员</h3>
          <nav class="inFot" id="ren1">
            <span class="active">参建人员</span>
            <span>单位工程</span>
          </nav>

          <div class="cbBox">

            <section class="active">

              <div class="tableB">
                <el-table :data="content" style="width: 100%" class="detail-table">
                  <el-table-column type="index" label="序号" width="80"></el-table-column>
                  <el-table-column prop="bidName" label="标段名称" width="390"></el-table-column>
                  <el-table-column prop="TenderingType" label="招标类型" width="160"></el-table-column>
                  <el-table-column prop="bidMethod" label="招标方式" width="130"></el-table-column>
                  <el-table-column prop="isBidNo" label="中标通知书编号" width="300"></el-table-column>
                  <el-table-column prop="isBidTime" label="中标时间"></el-table-column>
                </el-table>
              </div>
              <div class="padding-top-20">
                <el-pagination
                  background
                  :current-page="1"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="5">
                </el-pagination>
              </div>
            </section>

          </div>

        </section>
      </div>
    </section>

    <section class="bg">
      <div class="center-block">
        <div class="anchor" id="w2"></div>
        <h2 class="item-title">项目发包</h2>
        <div class="item-body">

          <section>
            <h3 class="item-title-small">发包关系图</h3>
            <div class="fabao center-block text-center bgWhite">
              <img style="transform: translateY(30px)" src="../../../assets/images/datase/fabao.png" alt="">
            </div>
          </section>

          <section>
            <h3 class="item-title-small">发包情况</h3>

            <nav id="" class="inFot difTab-title">
              <span :class="index===0?'active':''" v-for="(item,index) in qingkuang.type" :key="index">{{item.title}}({{item.shuliang}})</span>
            </nav>
            <div class="difTab bgW">
              <div class="difTab-body">

                <section class="active">
                  <ul class="cardUl">
                    <li v-for="(value,index) in qingkuang.rows" :key="index">
                      <div class="cardBox clearfix">
                        <div class="rightContent">
                          <h3 class="rightContentH3"><i>{{index+1}}</i><a href="#">{{value.title}}</a></h3>
                          <router-link class="cardMore" :to="`/dataService/project/detail?id=${value.id}`"><i
                            class="dtFont dtFont-chakanzhengshu"></i><br>工程详情
                          </router-link>

                          <ul class="rightContentUl">
                            <li><label>工程编码</label><span>{{value.bianma}}</span></li>
                            <li><label>承包方</label><span>{{value.chengbao}}</span></li>
                            <li><label style="text-indent: 1em">合同价</label><span>3800万元</span></li>

                            <li><label>发包时间</label><span>{{value.fabaoshijian}}</span></li>
                            <li><label>发包方</label><span>{{value.fabao}}</span></li>
                            <li><label>招标形式</label><span>{{value.zhaobiaofas}}</span></li>
                          </ul>
                        </div>
                      </div>
                    </li>
                  </ul>
                  <div class="padding-top-20">
                    <el-pagination
                      background
                      :current-page="1"
                      :page-sizes="[10, 20, 50, 100]"
                      :page-size="10"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="5">
                    </el-pagination>
                  </div>
                </section>
              </div>
            </div>
          </section>

        </div>
      </div>


      <div class="center-block" style="padding-top: 40px">
        <div class="item-body">
          <section>
            <h3 class="item-title-small">事件时间轴</h3>

            <ul class="timeGo">

              <li class="clearfix" v-for="(value,index) in lixiang.rows" :key="index">
                <div class="timeGo-Main">
                  <h2><i>{{index+1}}</i><span>{{value.title}}</span>{{value.time}}</h2>
                  <div class="timeGoBox">
                    <p>{{value.content}}</p>
                  </div>
                </div>
              </li>

            </ul>
          </section>

        </div>
      </div>

    </section>

    <section>
      <div class="center-block">
        <div class="anchor" id="w3"></div>
        <div class="QuaT">
          <h3 class="circular-title">工程文书信息</h3>

          <div id="QuaTle1" class="QuaTle">
            <span :class="index===0?'active':''" v-for="(item,index) in xixin.type" :key="index">{{item.title}}</span>
          </div>
        </div>

        <div class="item-body this-body">

          <section class="active">
            <div class="tableB margin-top-0 margin-bottom-20">
              <el-table :data="xixin.rows" style="width: 100%" class="detail-table">
                <el-table-column type="index" label="序号" width="80"></el-table-column>
                <el-table-column prop="title" label="标段名称" width="390"></el-table-column>
                <el-table-column prop="leixin" label="招标类型" width="160"></el-table-column>
                <el-table-column prop="fangshi" label="招标方式" width="130"></el-table-column>
                <el-table-column prop="bianhao" label="中标通知书编号" width="300"></el-table-column>
                <el-table-column prop="time" label="中标时间"></el-table-column>
              </el-table>
            </div>
            <div class="padding-top-20">
              <el-pagination
                background
                :current-page="1"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="5">
              </el-pagination>
            </div>
          </section>

        </div>
      </div>

    </section>


  </div>
</template>

<script>
  import {getProDetail, getConFabao} from '@/api/dataService';
  import navigation from '@/components/navigation';

  export default {
    name: "conDetail",
    components: {navigation},
    data() {
      return {
        projectData: {
          navList: [
            {name: '基本信息', id: 'w0'},
            {name: '项目建档', id: 'w1'},
            {name: '项目发包', id: 'w2'},
            {name: '工程文书信息', id: 'w3'}
          ],
          top: 363
        },
        id: '',
        content: [],
        qingkuang: {
          page: 1,
          pageSize: 1,
          type: [],
          rows: [],
          total: 0
        },
        lixiang: {
          rows: []
        },
        xixin: {
          page: 1,
          pageSize: 1,
          type: [],
          rows: [],
          total: 0
        }
      }
    },
    mounted() {
      this.$router.afterEach((to, from, next) => {
        window.scrollTo(0, 0)
      })
      this.id = this.$route.query.id || '';
      this.getProDetail()
      this.getConFabao()
    },
    methods: {
      getProDetail(data) {
        getProDetail(data).then(res => {
          this.content = res.obj.unitProject.rows
        })
      },
      getConFabao(data) {
        getConFabao(data).then(res => {
          let {qingkuang, xixin, lixiang} = res;
          this.qingkuang.rows = qingkuang.rows
          this.qingkuang.type = qingkuang.type
          this.lixiang.rows = lixiang.rows
          this.xixin.type = xixin.type
          this.xixin.rows = xixin.rows
          console.log(res)
        })
      }
    },
    filters: {
      parseStar: function (value) {
        if (!value) return ''
        return 'star' + Math.floor(parseFloat(value) / 2);
      }
    }
  }
</script>
